<template>
  <div>
    <div class="report-container gamesecurities-list">
      <Row type='flex'
           justify="space-between"
           class="coinrevenue-list-edit">
        <Row type='flex'
             align='middle'>
          <Col>
          <span class="concrete-data">时间：</span>
          <datePickerYmd @on-change="search"
                         :selectDateType.sync='selectDateType'
                         :dataType='dataType'
                         :dateOption="dateOption"
                         v-model="timeDate"
                         style="display:inline-block"></datePickerYmd>
          </Col>
          <Row type='flex'
               align='middle'
               class="export-btn">
            <Col><span>门店名称：</span></Col>
            <Col>
            <vueTreeselectChoice :multiple="true"
                                 ref="vueTreeselectChoice"
                                 @input="handleShop"
                                 @on-api-finish="apiFinish"
                                 permissionCode="moms:report:gamecouponrevenueanalytics"
                                 v-model="ShopValue"></vueTreeselectChoice>
            </Col>
            <Col>
            <Button type="primary"
                    class="coinrevenue-btn export-btn"
                    style="width:80px;"
                    @click="search">查询</Button>
            </Col>
          </Row>
        </Row>
        <Col class="export_receivable"
             v-if="hasPermission('moms:report:gamecouponrevenueanalyticsexport')">
        <Button class="check_all"
                @click="DropdownItemn"
                style="width:80px">导出
        </Button>
        </Col>
      </Row>
      <Table ref="rowSpanTable"
             stripe
             border
             :height="this.tableHeight"
             :loading='loading'
             class="table-list"
             :columns="columns"
             :data="resData">
      </Table>
    </div>
    <div class="page-box"
         style="margin-top: 20px">
      <Page :total="total"
            ref="pages"
            :current.sync="searchObj.offset"
            :page-size="searchObj.limit"
            @on-change="handlePage"
            @on-page-size-change="handlePageSize"
            show-sizer
            :page-size-opts="$pageSizeOpts"
            show-total />
    </div>
        <down-center ref="downCenterRef"
                 perms="moms:report:gamecouponrevenueanalytics"
                 v-if="hasPermission('moms:report:gamecouponrevenueanalyticsexport')"></down-center>
  </div>
</template>
<script>
import '../../report.less'
// import { rowSpanTable, formatRowspanData } from '@/libs/rowspan'
import { formatAmount } from '@/libs/tools'
import { gameCouponDetail } from '@/api/report/finance'
// import { blobToXls } from '@/libs/blobToXls'
import vueTreeselectChoice from '@/components/vue-treeselect-choice'
import datePickerYmd from '@/components/date-picker-ymd/date-picker-ymd.vue'
import dayjs from 'dayjs'
import DownCenter from '@/view/components/down-center/index.vue'
export default {
  name: 'report_finance_gamesecurities',
  components: { vueTreeselectChoice, datePickerYmd, DownCenter },
  data () {
    return {
      loading: false,
      dataChoose: 'day',
      shopName: null,
      permissionCode: 'moms:report:receivables',
      dateOption: {
        disabledDate: date => {
          if (process.env.NODE_BUILD === 'prod') return dayjs(date).isAfter(dayjs(new Date()).subtract(1, 'day'))
          return dayjs(date).isAfter(dayjs(new Date()))
        }
      },
      width: 180,
      selectShopId: [],
      dataType: [{ key: 'date', value: '日' }, { key: 'month', value: '月' }, { key: 'year', value: '年' }],
      selectDateType: 'date',
      ShopValue: [],
      statusList: false,
      timeDate: [dayjs().subtract(1, 'day').format('YYYY-MM-DD 00:00:00'), dayjs(new Date()).format('YYYY-MM-DD 00:00:00')],
      testValue: [],
      tableHeight: 0,
      total: 0,
      optionsStartTimeDay: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      searchObj: {
        shopId: [],
        offset: 1,
        limit: 10
      },
      resData: [
      ],
      columns: [
        { title: '门店', key: 'shopName', align: 'center', width: 200, fixed: 'left' },
        { title: '日期', key: 'statDate', align: 'center', width: 200 },
        { title: '游戏券营收(元)', key: 'revenue', align: 'center', width: 200 },
        { title: '售赠次数', key: 'saleGiftTimes', align: 'center', width: 200 },
        { title: '单价(同类)', key: 'price', align: 'center', width: 200 },
        { title: '消费次数', key: 'playTimes', align: 'center', width: 200 },
        { title: '到期次数', key: 'expiredTimes', align: 'center', width: 200 },
        { title: '结存次数', key: 'balanceTimes', align: 'center', width: 200 },
        { title: '游戏券收入(元)', key: 'gameCouponAmount', align: 'center', width: 200 },
        { title: '结存金额(元)', key: 'balanceAmount', align: 'center', width: 200 }
      ]
    }
  },
  computed: {
    startDate () {
      return this.timeDate[0]
    },
    endDate () {
      return this.timeDate[1]
    }
  },
  watch: {
    // 'searchObj.shopId': {
    //   handler: function (val, newval) {
    //     this.selectShopId = []
    //     this.filterSeleterList(val, this.shopList)
    //   },
    //   deep: true
    // }
  },
  mounted () {

  },
  updated () {
    this.$nextTick(() => {
      // rowSpanTable(this.$refs.rowSpanTable, 'shopName', 'left')
    })
  },
  methods: {
    // 选择门店
    selectList (val, instanceId) {
    },
    handlePageSize2 (num) {
      this.searchObj2.limit = num
    },
    handlePage2 (val) {
      this.searchObj2.offset = val
    },
    async handleShop () {
      const ids = await this.$refs.vueTreeselectChoice.getShopId()
      this.searchObj.shopId = ids
      this.search()
    },
    apiFinish () {
      this.ShopValue = null
    },
    getList () {
      this.loading = true
      this.tableHeight = 0
      this.resData = []
      gameCouponDetail({
        merchantId: this.$store.state.user.merchantId,
        // shopIds: this.searchObj.shopId,
        shopIds: this.searchObj.shopId,
        startDate: this.startDate,
        endDate: this.endDate,
        offset: (this.searchObj.offset - 1) * this.searchObj.limit,
        limit: this.searchObj.limit
      }).then(res => {
        this.loading = false
        if (res.data.status === 200) {
          this.total = res.data.totalCount
          if (res.data.data && res.data.data.length >= 14) {
            this.tableHeight = 520
          }
          this.resData = res.data.data ? this.filtersResData(res.data.data) : []
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    filtersResData (data) {
      data.map(ele => {
        ele.revenue = formatAmount(ele.revenue)
        ele.price = formatAmount(ele.price)
        ele.gameCouponAmount = formatAmount(ele.gameCouponAmount)
        ele.balanceAmount = formatAmount(ele.balanceAmount)
      })
      return data
    },
    DropdownItemn () {
      if (!dayjs(this.startDate).isValid()) {
        this.$Message.error(`请选择时间`)
      } else if (!this.searchObj.shopId.length) {
        this.$Message.error(`请选择门店列表`)
      } else {
        this.$refs.downCenterRef.addTask({
          merchantId: this.$store.state.user.merchantId,
          shopIds: this.searchObj.shopId,
          startDate: this.startDate,
          endDate: this.endDate,
          dateType: { year: 2, month: 1, date: 0 }[this.selectDateType],
          taskModule: 'gameCoupons'
        })
        // gameCouponDetailExport({
        //   merchantId: this.$store.state.user.merchantId,
        //   shopIds: this.searchObj.shopId,
        //   startDate: this.startDate,
        //   endDate: this.endDate
        // }).then(res => {
        //   if (res.status === 200) {
        //     if (this.selectDateType === 'month') {
        //       blobToXls(res.data, `游戏券收入表(${this.startDate.substring(0, 7)})`)
        //     } else if (this.selectDateType === 'date') {
        //       blobToXls(res.data, `游戏券收入表(${this.startDate.substring(0, 10)})`)
        //     } else {
        //       blobToXls(res.data, `游戏券收入表(${this.startDate.substring(0, 4)})`)
        //     }
        //   } else {
        //     this.$Message.error(`${res.data.error}`)
        //   }
        // })
      }
    },
    // 获取页码
    handlePage (val) {
      this.searchObj.offset = val
      this.getList()
    },
    handlePageSize (pageSize) {
      this.searchObj.limit = pageSize
      this.getList()
    },
    search () {
      if (!dayjs(this.startDate).isValid()) {
        this.$Message.error(`请选择时间`)
      } else if (!this.searchObj.shopId.length) {
        this.$Message.error(`请选择门店列表`)
      } else {
        this.searchObj.offset = 1
        this.searchObj.limit = 10
        this.getList()
      }
    }
  }
}
</script>
<style lang="less">
.ivu-table-tip {
  span {
    position: absolute;
    width: 100px;
    left: 50%;
    margin-left: -50px;
  }
}
.slotting-fee {
  .ivu-drawer-close {
    right: 24px;
    top: 19px;
  }
  .ivu-drawer-header {
    padding: 24px;
  }
  .table-list {
    // border-top: 1px solid #e8eaec !important;
    border-left: 1px solid #e8eaec !important;
  }
  .demo-drawer-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 16px 24px;
    text-align: right;
    background: #fff;
  }
}
</style>
